<template lang="pug">
div(class="flex justify-center items-center bg-grey-3" style="height: 100vh")
  div(class="row flex justify-center items-center absolute-center" )
    div(class="col-12")
      q-card(square style="min-width: 290px;height: 100%; width: 300px" class="bg-grey-3")
        q-card-section(align="center")
          //div( class="q-mb-xl") todo这里放logo
          // 登录表单
          q-form(ref="login_ref" @submit="login" @reset="resetLogin" class="q-gutter-sm")
            // 账号
            q-input(standout="bg-cyan text-white" lazy-rules filled bottom-slots v-model="login_form.username" label="账号"
              :rules="rules.username"
            )
              // 前图标
              template(v-slot:prepend)
                q-icon(name="account_circle" class="cursor-pointer")
              // 后图标 用于清空输入框 因为q-input的clearable属性不好用, 在tab的时候会聚焦到x上
              template(v-if="login_form.username" v-slot:append)
                q-icon(name="cancel" class="cursor-pointer" @click="login_form.username = ''" )
            // 密码
            q-input(clearable filled standout="bg-cyan text-white" bottom-slots v-model="login_form.password" label="密码"
              :type="is_pwd ? 'password' : 'text'" hint="" :rules="rules.password" )
              // 前图标
              template(v-slot:prepend)
                q-icon(name="vpn_key" class="cursor-pointer")
              // 后图标 用于切换密码明文
              template(v-if="login_form.password" v-slot:append)
                q-icon(:name="is_pwd ? 'visibility_off' : 'visibility'" class="cursor-pointer" @click="is_pwd = !is_pwd")
            // 登录按钮
            div(class="row justify-end q-mt-md")
              q-btn(label="登录" type="submit" color="primary" :loading="login_loading" class="q-mr-sm")
              q-btn(label="重置" type="reset" color="primary" flat class="q-ml-sm")


</template>

<script setup>
import {reactive, ref} from 'vue'
// import CryptoJS from "crypto-js";
import {useAccountStore} from "~/utils/store/account.js";
// import {useAssetsStore} from "~/utils/store/assets.js";

const account_store = useAccountStore()
// const assets_store = useAssetsStore()


// const sx_logo = assets_store.PNGS['/src/assets/logo.png'].default

const login_ref = ref(null)

const is_pwd = ref(true)

const login_form = reactive({
  username: '',
  password: ''
})

const rules = ref({
  username: [
    val => !!val || '请输入账号', // 不能为空
    val => (val && val.length >= 2) || '账号至少2位', // 最少2位
  ],
  password: [
    val => !!val || '请输入密码', // 不能为空
  ]
})

const login_loading = ref(false)


const login = () => {
  login_loading.value = true
  // login_form.password = encrypt(login_form.password)
  account_store.login(login_form).finally(() => {
    login_loading.value = false
  })
}

// const encrypt = (pwd) => {
//   let key = 'sxbankapp_sso_v1'
//   let iv = '629d94c14f27449d'
//   key = CryptoJS.enc.Utf8.parse(key);
//   iv = CryptoJS.enc.Utf8.parse(iv);
//   let srcs = CryptoJS.enc.Utf8.parse(pwd);
//   let encrypted = CryptoJS.AES.encrypt(srcs, key, {iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7});
//   return encrypted.toString();
// }

const resetLogin = () => {
  login_form.username = ''
  login_form.password = ''
}


</script>

<style scoped>

</style>